<template>
  <div class="app-container">
    <div class="loader">
      <div class="dot" v-for="(item, index) in 5" :key="item" :style="{'--i':index}"></div>
    </div>
    <h2 v-text="text" />
    <div class="loader">
      <div class="dot" v-for="(item, index) in 5" :key="item" :style="{'--i':index}"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoadingPage',
  props: {
    text: {
      type: String,
      default: 'Loading...'
    }
  }
}
</script>

<style scoped lang="less">
  @import "~common/style/variable.less";

  @color: #00ff0a;
  .app-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*background: #001300;*/
    animation: changeColor 5s linear infinite;
    .loader {
      position: relative;
      display: flex;
      .dot {
        position: relative;
        display: block;
        width: 20px;
        height: 20px;
        background: @color;
        box-shadow: 0 0 10px @color,
        0 0 20px @color,
        0 0 40px @color,
        0 0 60px @color,
        0 0 80px @color,
        0 0 100px @color;
        margin: 20px 19px;
        transform: scale(0.1);
        border-radius: 50%;
        animation: animateDot 2s linear infinite;
        animation-delay: calc(0.2s * var(--i));
      }
    }
    .loader:last-child {
      .dot {
        animation-delay: calc(-0.2s * var(--i));
      }
    }
    h2 {
      margin: 20px 0;
      font-size: @font-size-large-x;
      color: @color;
    }
  }

  @keyframes changeColor {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }
  @keyframes animateDot {
    0%,50%,100% { transform: scale(0.1) }
    10% {
      transform: scale(1);
    }
    50%,100% {
      /*transform: scale(0.1);*/
    }
  }
</style>
